@import "@styles/theme.scss";
@import '@styles/icon.font.scss';


.tabBar {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: rgba(255,255,255,1);
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    box-shadow: 0 -2px 2px $border-color;
    z-index: 1;
    &__item {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
      &__img {
        margin: 5PX auto 0;
        width: 18PX;
        height: 18Px;
      }
  
      &-num {
        min-width: 12Px;
        height: 12Px;
        border-radius: 12Px;
        font-size: 10Px;
        background-color: #d51b51;
        box-shadow: 0 0 4Px rgba(0, 0, 0, 0.5);
        color: #fff;
        position: absolute;
        z-index: 5;
        top: 15%;
        right: 30%;
        text-align: center;
      }
      &__text {
        margin-top: 5Px;
        font-size: 10Px;
        &--actived{
          color:$high-color
        }
  
      }
    }
  }

  .iconfont--actived{
    color:$high-color
  }